<template>
  <div class="drawer-detail" v-loading="loading">
    <div class="drawer-detail-title">{{ data.title }}</div>
    <div v-html="data.content ? htmlDecode(data.content) : ''"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getLibraryManageDetail, htmlDecode } from '../api'

interface Props {
  row: any
}
const props = withDefaults(defineProps<Props>(), {
  row: () => ({})
})

const loading = ref(false)
const data = ref<any>({})

onMounted(() => {
  loading.value = true
  getLibraryManageDetail({ libraryManageId: props.row.libraryManageId })
    .then(res => {
      data.value = res
    })
    .finally(() => {
      loading.value = false
    })
})

</script>

<style scoped lang="scss">
.drawer-detail {
  padding: 20px;
  &-title {
    height: 44px;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 13px;
    color: #757575;
    &::before {
      box-sizing: border-box;
      content: '';
      display: inline-block;
      width: 7px;
      height: 10px;
      border: 2.4px solid #3778FB;
      border-radius: 2px;
      margin-right: 5px;
    }
  }
}
</style>
